<template>
	<view class="container">
		<image class="header-image" src="/path/to/gas-station-image.jpg" mode="aspectFill"></image>

		<view class="info-section">
			<text class="station-name">中途石油加油站</text>
			<view class="contact-section">
				<text class="operation-time">营业时间：周一至周五 09:00–22:00</text>
				<view class="icons">
					<image class="icon" src="/path/to/phone-icon.png" />
					<image class="icon" src="/path/to/navigation-icon.png" />
				</view>
			</view>
			<text class="address">山阳区人民中路32号</text>
		</view>

		<view class="price-section">
			<text class="price-title">油价详情</text>
			<view class="price-list" v-for="(oil, index) in oilPrices" :key="index">
				<text class="oil-type">{{ oil.type }}</text>
				<text class="oil-price">{{ oil.price }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oilPrices: [{
						type: "92#",
						price: "￥5.85/L"
					},
					{
						type: "95#",
						price: "￥5.85/L"
					},
					{
						type: "98#",
						price: "￥5.85/L"
					},
					{
						type: "0#",
						price: "￥5.85/L"
					}
				]
			};
		}
	};
</script>

<style>
	.container {
		padding: 10px;
		background-color: #fff;
	}

	.header-image {
		width: 100%;
		height: 200px;
		border-radius: 5px;
	}

	.info-section {
		padding: 10px 0;
	}

	.station-name {
		font-size: 18px;
		font-weight: bold;
	}

	.contact-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 5px 0;
	}

	.operation-time {
		font-size: 14px;
		color: #666;
	}

	.icons {
		display: flex;
		gap: 10px;
	}

	.icon {
		width: 20px;
		height: 20px;
	}

	.address {
		font-size: 14px;
		color: #666;
		margin-top: 5px;
	}

	.price-section {
		border-top: 1px solid #eee;
		padding-top: 10px;
	}

	.price-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.price-list {
		display: flex;
		justify-content: space-between;
		padding: 5px 0;
	}

	.oil-type,
	.oil-price {
		font-size: 14px;
		color: #333;
	}
</style>